<template>
  <page-wrap
    back
    :show-top="showTop"
    :title="title"
    :previewId="{ sharePersonId, mpaActivityId }"
    hideTab
  >
    <!-- need-login -->
    <view
      class="preview content"
      :style="'padding-top:' + navHeight + 'px;'"
      style="background: #ffffff"
    >
      <view class="previewContainer">
        <view class="previewBody">
          <view class="preview_btn" @click="topreview">
            <image :src="book" class="icon"></image>
            <text v-if="isBuy == 2">点击免费预览</text>
            <text v-else>点击查看报告</text>
          </view>
        </view>
        <view class="buyBlock" v-if="isBuy == 2">
          <view class="buyButtonContainer">
            <view class="ButtonContent">
              <text class="buyTips">可免费预览部分内容，阅读全篇请购买</text>
              <view class="doubleButton_new app-btn">
                <button class="btn_left" @click="handleStraight">
                  <span class="buttonText">
                    <span class="text">直接购买</span>
                    <span class="price">{{ activityPrice }} 元</span>
                  </span>
                </button>
                <button class="btn_right" @click="openShareModal">
                  <span class="buttonText">
                    <span class="text">分享获得优惠价</span>
                    <span class="price" style="font-size: 26rpx">
                      {{ sharePrice }} 元</span
                    >
                  </span>
                </button>
              </view>
              <view class="bonusTips">
                <view class="trangle"></view>
                <span class="bonusTipsContent">现在分享还可获得现金分成哦</span>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="guessLike">
        <span class="guessTitle" :style="isBuy == 2 ? '' : 'margin-top:48rpx'">
          猜你喜欢
        </span>
        <reportItem v-for="item in reportList" :key="item" :reportItem="item" />
      </view>
      <u-modal
        v-model="showShareModal"
        title="提示"
        :showCancelButton="false"
        :showConfirmButton="false"
      >
        <view class="slot-content">
          <view class="shareModal">
            <p>
              分享报告，即可享受优惠价又可赚取现金，赶紧分享赚钱吧！（PS：可下载职业APP查看活动详情）
            </p>
          </view>
          <view class="btns">
            <button @click="showShareModal = false">取消</button>
            <button open-type="share" @click="showShareModal = false">
              去分享
            </button>
          </view>
        </view>
      </u-modal>

      <LoginDialog
        ref="loginDialog"
        @loginSuccessBack="loginSuccessBack"
      ></LoginDialog>
    </view>
  </page-wrap>
</template>

<script>
import IMEventHandler from "@/utils/im";
import reportItem from "./reportItem/index.vue";
import {
  getReport,
  appAddLinkOpenRecord,
  addPay,
  getShareUrl,
} from "@/api/modules/preview";
import {
  getWxLoginInfo,
  getPersonDetail,
  getUnionID,
  bindPhone,
  clickShareLink,
} from "@/api/index";
import ShareMixin from "@/mixins/share";
import LoginMixin from "@/mixins/login.js";
import LoginDialog from "@/components/LoginDialog";
export default {
  mixins: [ShareMixin, LoginMixin],
  components: {
    reportItem,
    LoginDialog,
  },
  data() {
    return {
      book: this.$imgBase + "report/book.png",
      reportList: [],
      showTop: true,
      isWx: false,
      preview: [],
      downloadUrl: "",
      mpaActivityId: "",
      sharePersonId: "",
      fileUrl: "",
      majorId: "",
      title: "",
      activityDesc: "",
      navHeight: 0,
      isBuy: 2,
      userInfo: null,
      optionUrl: "",
      activityPrice: 0,
      sharePrice: 0,
      loading: false,
      provider: [],
      isShareReport: false, //分享减价弹框
      loginStatus: true, //是否需要登录
      isNewUser: false, //是否新用户
      isPC: false,
      showShareModal: false, //分享弹框
      //分享背景图
      shareBackground:
        "https://upload.yl1001.com/upload/files/view?file=ATq7E6RGJAygJNxdouib6NP87,5nx0ELUAxCn04Mvh0o5s7p_iz4N4rPlUEmE.png",
      personId: uni.getStorageSync("person-id").slice(2) || "",
    };
  },
  created() {
    this.navHeight = getApp().globalData.navHeight;
    this.userInfo = getApp().globalData.userInfo;
    this.getPersonDetail(true);
  },
  mounted() {
    this.sharePath = `/pagesSub/careerGrow/reportPreview/reportPreview?mpaActivityId=${this.mpaActivityId}&sharePersonId=${this.personId}`;
    this.shareQuery = `mpaActivityId=${this.mpaActivityId}&sharePersonId=${this.personId}`;
  },

  onLoad(options) {
    // 处理链接
    if (options.q) {
      let paramStr = decodeURIComponent(options.q).split("?");
      this.optionUrl = decodeURIComponent(options.q);
      let resObj = {};
      if (paramStr[1]) {
        paramStr[1].split("&") &&
          paramStr[1].split("&").forEach((item) => {
            resObj[item.split("=")[0]] = item.split("=")[1];
          });
      }
      if (resObj.hasOwnProperty("sharePersonId")) {
        this.sharePersonId = resObj.sharePersonId;
      }
      if (resObj.hasOwnProperty("mpaActivityId")) {
        this.mpaActivityId = resObj.mpaActivityId;
      }
    } else {
      this.mpaActivityId = options && options.mpaActivityId;
      this.sharePersonId = options && options.sharePersonId;
    }
    uni.getSystemInfo({
      success: (res) => {
        // console.log(res);
        if (
          res.system.toLowerCase().includes("windows") ||
          res.system.toLowerCase().includes("macos") ||
          res.model.toLowerCase().includes("mac")
        ) {
          this.isPC = true;
        }
      },
    });
  },
  // // 点击分享
  // onShareAppMessage(res) {
  //   // 分享数据埋点
  //   this.getShareUrl();
  //   if (res.from === "button") {
  //     this.isShareReport = true;
  //   }
  //   return {
  //     title: this.title,
  //     imageUrl: this.shareBackground,
  //     path: `/pagesSub/careerGrow/reportPreview/reportPreview?mpaActivityId=${this.mpaActivityId}&sharePersonId=${this.personId}`,
  //   };
  // },

  // // 分享到朋友圈
  // onShareTimeline() {
  //   // 分享数据埋点
  //   this.getShareUrl();
  //   return {
  //     title: this.title,
  //     imageUrl: this.shareBackground,
  //     path: `/pagesSub/careerGrow/reportPreview/reportPreview?mpaActivityId=${this.mpaActivityId}&sharePersonId=${this.personId}`,
  //   };
  // },
  watch: {
    isShareReport(val) {
      let _this = this;
      if (val) {
        setTimeout(() => {
          uni.showModal({
            title: "提示",
            content:
              "分享成功，恭喜您获得分享价资格，赶紧下单吧！（PS：可在我的》分享赚钱页查看您的分享佣金）",
            cancelText: "放弃资格",
            confirmText: "立即下单",
            success: function (res) {
              if (res.confirm) {
                _this.handleModalConfirm();
                _this.isShareReport = false;
              } else if (res.cancel) {
                _this.isShareReport = false;
              }
            },
          });
        }, 500);
      }
    },
  },
  methods: {
    openShareModal() {
      if (!this.personId) {
        this.toLogin();
        return;
      }
      this.showShareModal = true;
    },
    handleClose() {
      uni.exitMiniProgram({ success: (res) => {} });
    },
    handleInfo() {
      this.loginStatus = false;
      let that = this;
      uni.getUserInfo({
        success(res) {
          uni.setStorageSync("encryptedData", res.encryptedData);
          uni.setStorageSync("iv", res.iv);
          uni.setStorageSync("signature", res.signature);
          that.getSessionKey();
        },
        fail(err) {
          uni.showToast({ icon: "none", title: "取消登录" });
          // uni.reLaunch({ url: "/pages/index/index" });
        },
      });
    },
    getSessionKey() {
      let param = {
        session3rd: uni.getStorageSync("wx-session3rd"),
      };
      getWxLoginInfo(param).then((res) => {
        let data = res.data || res;
        if (data && data.indexOf("@@@")) {
          this.getUId(data.split("@@@")[1]);
        }
      });
    },
    getUId(sessionKey) {
      // let param = {
      //   sessionKey: sessionKey,
      //   userInfo: JSON.stringify({
      //     encryptedData: uni.getStorageSync("encryptedData"),
      //     iv: uni.getStorageSync("iv"),
      //     signature: uni.getStorageSync("signature"),
      //   }),
      // };
      let param = {
        sessionKey: sessionKey,
        encryptedData: uni.getStorageSync("encryptedData"),
        iv: uni.getStorageSync("iv"),
      };
      getUnionID(param).then((res) => {
        wx.setStorageSync("wx-unionId", res.unionId);
      });
    },
    handleBindPhone(data) {
      let param = {
        mobileEncrypted: data.encryptedData,
        mobileIv: data.iv,
        spEncrypted: uni.getStorageSync("encryptedData"),
        spIv: uni.getStorageSync("iv"),
        session3rd: uni.getStorageSync("wx-session3rd"),
      };
      uni.showLoading({
        title: "正在登录",
        mask: true,
      });
      bindPhone(param)
        .then((res) => {
          if (res.data && res.data.info && res.data.info.newRegister) {
            this.isNewUser = true;
          }
          if (res.status === "OK") {
            this.handleLogin(res.data.info.personId);

            if (this.isNewUser) {
              this.reportShareData(res.data.info.personId, "reg");
            } else {
              this.reportShareData(res.data.info.personId, "login");
            }
          } else {
            uni.hideLoading();
            uni.showToast({
              icon: "none",
              title: res.status_desc || "手机绑定异常",
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({ icon: "none", title: "手机绑定异常" });
        });
    },
    handleLogin(personId) {
      uni.setStorageSync("person-id", "id" + personId);
      let isImLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      let isLogin = false;
      if (!isImLogin) {
        new IMEventHandler(() => {
          let currentPage = getCurrentPages()[0].route;
          if (currentPage.indexOf("loginMode") >= 0) {
            isLogin = true;
            uni.hideLoading();
            uni.showToast({ icon: "none", title: "登录成功" });
            // this.getPersonDetail(true,personId);
            uni.reLaunch({
              url: `/pagesSub/careerGrow/reportPreview/reportPreview?mpaActivityId=${this.mpaActivityId}&sharePersonId=${this.sharePersonId}`,
            });
          }
        });
        setTimeout(() => {
          if (!isLogin) {
            getApp().globalData.tim && getApp().globalData.tim.logout();
            getApp().globalData.tim = null;
            uni.hideLoading();
            uni.showToast({ icon: "none", title: "登录成功" });
            uni.reLaunch({
              url: `/pagesSub/careerGrow/reportPreview/reportPreview?mpaActivityId=${this.mpaActivityId}&sharePersonId=${this.sharePersonId}`,
            });
            // this.getPersonDetail(true,personId);
          }
        }, 5000);
      } else {
        uni.hideLoading();
        uni.showToast({ icon: "none", title: "登录成功" });
        uni.reLaunch({
          url: `/pagesSub/careerGrow/reportPreview/reportPreview?mpaActivityId=${this.mpaActivityId}&sharePersonId=${this.sharePersonId}`,
        });
        // this.getPersonDetail(true,personId);
      }
    },

    clickDownload() {
      uni.navigateTo({ url: "/pages/reportPreview/download/download" });
    },
    handleShare() {
      console.log("ok");
    },
    handleStraight() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      console.log("handleStraight", this.personId);
      if (!this.personId) {
        this.toLogin();
        return;
      }
      if (this.loading) return;
      uni.getProvider({
        service: "payment",
        success: (res) => {
          this.provider = res.provider;
        },
        fail: (err) => {
          // console.log(err);
        },
      });
      if (this.activityPrice > 0) {
        if (this.provider.indexOf("wxpay") >= 0) this.goPay(this.activityPrice);
      } else {
        this.loading = false;
      }
    },
    handleModalConfirm() {
      console.log("handleModalConfirm", this.personId);
      if (!this.personId) {
        this.toLogin();
        return;
      }
      if (this.loading) return;
      uni.getProvider({
        service: "payment",
        success: (res) => {
          this.provider = res.provider;
        },
        fail: (err) => {
          // console.log(err);
        },
      });
      if (this.sharePrice > 0) {
        if (this.provider.indexOf("wxpay") >= 0) this.goPay(this.sharePrice);
      } else {
        this.loading = false;
      }
    },
    goPay(price) {
      const openid = uni.getStorageSync("openid");
      let params = {
        orderTypeCode: 20,
        orderFuncId: this.mpaActivityId,
        orderNum: price,
        orderUserId: this.userInfo.id,
        orderUserName:
          this.userInfo.iname || this.userInfo.uname || this.userInfo.id,
        orderCompanyId: this.userInfo.id,
        orderCompanyName:
          this.userInfo.iname || this.userInfo.uname || this.userInfo.id,
        channelType: 20,
        moduleType: "OCCUPATION_MODULE_TYPE",
        subject: this.title,
        body: this.activityDesc,
        openId: openid,
      };
      addPay(params, this.personId)
        .then((res) => {
          if (res && res.code == 200) {
            this.requestPayment(res.data);
          } else {
            uni.hideLoading();
            this.loading = false;
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });

      // this.handleAppMsg("doAppPay", {
      //   activityName,
      //   activityPrice: price,
      //   mpaActivityId,
      // });
    },
    // 支付
    requestPayment(data) {
      data.payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: data.payData.timeStamp,
        nonceStr: data.payData.nonceStr,
        package: data.payData.package,
        signType: data.payData.signType,
        paySign: data.payData.paySign,
        success: (res) => {
          this.handlePaySuccess(res);
        },
        fail: (err) => {
          this.handlePayFial(err);
        },
      });
    },
    handlePaySuccess(res) {
      uni.hideLoading();
      this.loading = false;
      uni.showToast({
        title: "购买成功",
        icon: "none",
      });
      uni.navigateTo({
        url: "/pagesSub/userCenter/myReport/index",
      });
    },
    handlePayFial(res) {
      uni.hideLoading();
      this.loading = false;
      uni.showToast({
        title: "购买失败",
        icon: "none",
      });
    },

    topreview() {
      if (this.isPC) {
        uni.showToast({
          title: "报告预览暂不支持PC端设备，请前往移动端预览",
          icon: "none",
        });
        return;
      }
      // if(!this.personId) {
      //   this.toLogin();
      //   return;
      // }
      //打开pdf文件
      uni.showLoading({
        title: "加载中...",
      });
      // let file = decodeURIComponent(this.fileUrl); // 解码(注意:涉及到文件名中有中文需要转码)
      // file = this.getFilePathName(file); // 将文件路径过滤，格式为【文件名+.后缀名】
      // 预览网络文档
      wx.downloadFile({
        url: this.fileUrl, // 文件的本身url
        filePath: wx.env.USER_DATA_PATH + "/" + this.title + ".pdf", // 本地自定义的文件名
        success: function (res) {
          let filePath = res.filePath;
          wx.openDocument({
            filePath: filePath,
            success: function () {
              uni.hideLoading();
            },
            fail: function () {
              uni.hideLoading();
            },
          });
          uni.hideLoading();
        },
        fail: function (res) {
          uni.showLoading({
            title: res,
          });
        },
      });
    },
    getFilePathName(path) {
      let pos1 = path.lastIndexOf("/");
      let pos2 = path.lastIndexOf("\\");
      let position = Math.max(pos1, pos2);
      if (position < 0) return path;
      else return path.substring(position + 1);
    },
    // 获取用户信息
    getPersonDetail(update, personId) {
      if (
        !getApp().globalData.userInfo ||
        !getApp().globalData.userInfo.id ||
        update
      ) {
        let param = {
          param: JSON.stringify({
            personId: personId || this.personId,
          }),
          where: "",
          slaveInfo: 1,
        };
        getPersonDetail(param).then((res) => {
          this.userInfo = res.data || res;
          this.getReportList(personId);
          if (
            this.userInfo.pic &&
            this.userInfo.pic.indexOf("img.job1001.com/myUpload/pic.gif") >= 0
          ) {
            this.userInfo.pic = this.$defalutAvatar;
          }
          getApp().globalData.userInfo = this.userInfo;
        });
      } else {
        this.userInfo = getApp().globalData.userInfo;
      }
    },
    // 获取报告
    getReportList(id) {
      let personId = id || this.personId;
      let param = {
        personId: personId || this.personId,
        mpaActivityId: this.mpaActivityId,
        clickType: 0,
        moduleType: "OCCUPATION_MODULE_TYPE",
      };
      getReport(param, personId)
        .then((res) => {
          if (res && res.code == 200) {
            if (res.data[0].isBuy == 2) this.fileUrl = res.data[0].previewUrl;
            else this.fileUrl = res.data[0].fileUrl;
            this.majorId = res.data[0].majorId;
            this.title = res.data[0].activityName;
            this.shareTitle = this.title;
            this.activityDesc = res.data[0].activityIntroduce;
            this.activityPrice = res.data[0].activityPrice;
            this.sharePrice = res.data[0].sharePrice;
            this.isBuy = res.data[0].isBuy;
            this.appAddLinkOpenRecord();
            this.getLikeReport();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取猜你喜欢列表
    getLikeReport(id) {
      let personId = id || this.personId;
      let param = {
        personId,
        majorId: this.majorId,
        limit: 5,
        clickType: 1,
        moduleType: "OCCUPATION_MODULE_TYPE",
      };
      getReport(param, personId).then((res) => {
        if (res && res.code == 200) {
          this.reportList = res.data;
        }
      });
    },
    // 数据埋点
    appAddLinkOpenRecord() {
      if (this.sharePersonId && this.userInfo.id) {
        let param = {
          mpaActivityId: this.mpaActivityId,
          activityName: this.title,
          activityDesc: this.activityDesc,
          sharePersonId: this.sharePersonId,
          openPersonId: this.userInfo.id,
          openPersonName: this.userInfo.iname,
          url: this.optionUrl,
          moduleType: "OCCUPATION_MODULE_TYPE",
        };
        appAddLinkOpenRecord(param, this.personId)
          .then((res) => {
            // console.log(res);
          })
          .finally(() => {
            // this.loading = false;
          });
      }
    },
    // 获取分享配置，分享埋点
    getShareUrl() {
      let params = {
        mpaActivityId: this.mpaActivityId,
        sharePersonId: this.userInfo.id,
        sharePersonName: this.userInfo.iname,
        majorId: this.majorId,
        moduleType: "OCCUPATION_MODULE_TYPE",
      };
      getShareUrl(params, this.personId)
        .then((res) => {})
        .finally(() => {});
    },
    toLogin() {
      this.$refs.loginDialog.setVisibility(true);
    },

    reportShareData(personId, type) {
      let shareCode = getApp().globalData.shareCode;
      if (!shareCode) return;

      clickShareLink({
        personId,
        uniqueCode: shareCode,
        type,
      });
    },

    loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      console.log("loginSuccessBack", this.personId);
      this.getPersonDetail(true);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  // height:calc(100vh - 128rpx);
  background-color: #ffffff;
  position: relative;
}
.previewContainer {
  position: relative;
  height: 100%;
  background-color: #f4f6f8;
  .previewBody {
    // position: relative;
    // margin-top: 128rpx;
    width: 100%;
    height: 926rpx;
    background: #ecedef;
    opacity: 0.82;
    background: url("//upload.yl1001.com/upload/images/view?file=rE8YsE5aTpJwjru4oqh07o4r69sKJZ4BUeKx,a,W/aqw_0zp1U89TOjbs1z_o.png")
      no-repeat;
    background-size: 752rpx 926rpx;
    background-position: center center;
    .preview_btn {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 342rpx;
      height: 160rpx;
      text-align: center;
      line-height: 140rpx;
      background-image: url($img-base + "report/react.png?v=2");
      background-size: 100% 100%;
      background-position: center 10%;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff6969;
      .icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 10rpx;
      }
    }
  }
  .buyBlock {
    width: 100%;
    .blankMask {
      height: 84rpx;
      background: #ffffff;
      opacity: 0.8;
    }
    .buyButtonContainer {
      display: flex;
      justify-content: center;
      height: 240rpx;
      background-color: #ffffff;
      .ButtonContent {
        margin-top: 26rpx;
        text-align: center;
        width: 684rpx;
        .buyTips {
          width: 224rpx;
          height: 32rpx;
          font-size: 28rpx;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #222222;
          line-height: 32rpx;
          margin-top: 36rpx;
        }
        .doubleButton_new {
          display: flex;
          justify-content: center;
          margin-top: 40rpx;
          .btn_left,
          .btn_right {
            width: 300rpx;
            height: 88rpx;
            line-height: none;
            border-radius: 22px;
            border-radius: 22px;
            border: none;
            background-color: transparent;
            &::after {
              border: none;
            }
          }
          .btn_left {
            background-image: linear-gradient(180deg, #20a5ff 1%, #0091ff 100%);
            box-shadow: 0 2px 10px 0 rgba(11, 152, 255, 0.3);
          }
          .btn_right {
            background-image: linear-gradient(180deg, #ff3d60 0%, #ff3c38 100%);
            box-shadow: 0 2px 10px 0 rgba(255, 61, 81, 0.3);
          }
          .buttonText {
            display: flex;
            flex-direction: column;
            width: 100%;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            margin-top: 14rpx;
            .price {
              font-size: 24rpx;
              line-height: 34rpx;
            }
            .text {
              font-size: 28rpx;
              line-height: 28rpx;
            }
          }
        }
        .bonusTips {
          float: right;
          width: 300rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 54rpx;
          margin-right: 21rpx;
          margin-top: 18rpx;
          .trangle {
            position: relative;
            width: 0;
            height: 0;
            border-width: 0 10rpx 10rpx;
            border-style: solid;
            border-color: transparent transparent #ff9c00;
          }
          .bonusTipsContent {
            color: white;
            font-family: PingFangSC;
            font-size: 20rpx;
            color: #ffffff;
            letter-spacing: 0;
            line-height: 32rpx;
            background-image: linear-gradient(180deg, #ff9c00 0%, #ff7900 100%);
            padding: 14rpx 20rpx 8rpx;
            border-radius: 10rpx;
          }
        }
        .doubleButton {
          display: flex;
          justify-content: center;
          margin: auto;
          width: 496rpx;
          height: 160rpx;
          background-image: url("https://upload.yl1001.com/upload/images/view?file=klVyWt6g5kgwpk/ZtF4Qjw1MDWifTbzLnxZCoWiJQYZxocUZQ_9l4mhmxJPzw.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: center center;
          .btn_left {
            width: 300rpx;
            height: 88rpx;
          }
          .btn {
            width: 456rpx;
            height: 160rpx;
            padding-top: 6rpx;
            border: none;
            background-color: transparent;
            &::after {
              border: none;
            }
          }
          .buttonText {
            display: inline-flex;
            flex-direction: column;
            width: 100%;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 36rpx;
            .price {
              font-size: 32rpx;
            }
            .text {
              font-size: 26rpx;
            }
          }
        }
      }
    }
  }
}
.slot-content {
  .shareModal {
    font-size: 28rpx;
    color: #222;
    padding: 28rpx 48rpx 28rpx 48rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    p {
      line-height: 40rpx;
      margin-top: 15rpx;
    }
  }
  .btns {
    display: flex;
    button {
      width: 50%;
      background: none;
      font-size: 32rpx;
      &:first-child {
        color: #606266;
      }
      &:last-child {
        color: #ef4747;
      }
      &::after {
        border: none;
      }
    }
  }
}

.guessLike {
  padding: 6rpx 32rpx 44rpx;
  // padding-top: 44rpx;
  background: #ffffff;
  margin-top: 24rpx;
  .guessTitle {
    display: block;
    width: 144rpx;
    height: 32rpx;
    font-size: 36rpx;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #222222;
    line-height: 32rpx;
    margin-bottom: 26rpx;
  }
}
.dialog {
  width: 560rpx;
  height: 380rpx;
  padding-top: 60rpx;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  .btn {
    width: 50%;
    height: 160rpx;
    padding-top: 6rpx;
    border: none;
    background-color: transparent;
    &::after {
      border: none;
    }
  }
}
.login {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: rgba(0, 0, 0, 0.4);
}
.loginDialog {
  width: 560rpx;
  height: 380rpx;
  padding: 60rpx 48rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 30rpx;
  font-family: PingFang-SC-Bold, PingFang-SC;
  z-index: 99;
  .title {
    text-align: center;
    font-size: 36rpx;
    font-weight: 600;
  }
  .desc {
    text-align: center;
    margin-top: 30rpx;
    font-size: 30rpx;
    line-height: 48rpx;
  }
  .btn {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 100rpx;
    padding-top: 6rpx;
    border: none;
    background-color: transparent;
    font-size: 32rpx;
    button {
      width: 200rpx;
      border: none;
      margin-left: 0;
      margin-right: 0;
      background-color: transparent;
      &::after {
        border: none;
      }
    }
  }
}
</style>
